<template>
	<view class="list">
		<u-navbar title="课程列表"  @rightClick="rightClick" :autoBack="true">
		        </u-navbar>
		<view class="lie">
					<view class="content" v-for="(item,index) in list" :key="index" @click="godetails(item.id)">
						<div class="left">
							<img :src="item.cover" alt="" srcset="" v-if="item.cover==''?false:true">
							<img v-else src="/static/logo.png" alt="">
						</div>
						<div class="right">	
							<div class="right-top">{{item.title}}</div>
							<div class="bottom">
								<span>{{item.price}}</span>
								<span>{{item.t_price}}</span>
							</div>
						</div>
					</view>
		</view>
	</view>
</template>

<script>
	import {getcourse} from '../request/index.js'
	export default {
		data() {
			return {
				list:[],
				total:null, //总共多少条数据
				formData:{
				        pageSize:5,  //每页10条数据
						page:1,       //第几页
				    }
			};
		},
		onLoad(options) {
			this.getlist()
			
		},
		methods:{
			godetails(id){
				uni.navigateTo({
					url:`/pages/details/details?id=${id}`
				})
			},
			getlist(){
				getcourse(this.formData).then((res)=>{
					this.list=res.data.data.rows
					console.log(res);
				})
			},
			onReachBottom(){
				this.formData.page++
				this.getlist()
			},
			onPullDownRefresh(){
				getcourse({page:1}).then((res)=>{
					this.list=res.data.data.rows
					console.log(res);
				})
				 setTimeout(() => {
				        //结束下拉刷新
				      uni.stopPullDownRefresh ();
				    }, 1000);

			}
		}
	}
</script>

<style lang="scss">
.list{
	width: 100%;
	height: 100%;
	.lie{
		width: 100%;
		margin-top: 50px;
		.top{
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			line-height: 50px;
			padding:  10px;
			.left{
				font-weight: 800;
			}
			.right{
				font-size: 16px;
			}
		}
		.content{
			width: 100%;
			height: 115px;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			.left{
				flex: 4;
				img{
					width: 100%;
					height: 100%;
				}
			}
			.right{
				flex: 6;
			}
			
		}
	}
}
</style>
